<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/iron-icon/iron-icon.html">
<!--<link rel="import" href="../bower_components/iron-ajax/iron-ajax.html">-->
<dom-module id="user-center">
    <template>
        <style>


            .fullContent{width: 100vw;position: relative;}
            .fullContent::before{
                content: '';width: 100%;height: 220px;display: block;position: absolute;left: 0;top: 0;z-index: 0;background: #0658bb;
                background: -moz-linear-gradient(top, #0658bb 0%,#0158c1 50%, #0073bc 100%);
                background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0658bb), color-stop(50%,#0158c1),color-stop(100%,#0073bc));

                background: -o-linear-gradient(top, #0658bb 0%,#0158c1 50%,#0073bc 100%);
                background: -ms-linear-gradient(top, #0658bb 0%,#0158c1 50%,#0073bc 100%);
                background: linear-gradient(to bottom, #0658bb 0%,#0158c1 50%,#0073bc 100%);
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0658bb', endColorstr='#0073bc',GradientType=0 );
            }
            .fullContent .content{width: 1280px;overflow: hidden;margin: 0 auto;position: relative;z-index: 1;}
            .fullContent .content .header{width: 100%;height: 130px;box-sizing: border-box;}

        </style>

        <div class="fullContent">
            <div class="content">
                <div class="header">

                </div>

            </div>

        </div>

        <paper-drawer-panel>
            <div drawer>
                <paper-menu selected="{{selected}}">
                    <paper-icon-item>
                        <paper-ripple></paper-ripple>
                        <iron-icon icon="av:play-circle-filled" item-icon></iron-icon> My Music
                    </paper-icon-item>
                    <paper-icon-item>
                        <paper-ripple></paper-ripple>
                        <iron-icon icon="av:library-music" item-icon></iron-icon> Poly Music
                    </paper-icon-item>
                    <paper-icon-item>
                        <paper-ripple></paper-ripple>
                        <iron-icon icon="social:group" item-icon></iron-icon> Users
                    </paper-icon-item>
                    <paper-icon-item>
                        <paper-ripple></paper-ripple>
                        <iron-icon icon="icons:polymer" item-icon></iron-icon> About the app
                    </paper-icon-item>
                </paper-menu>
            </div>
            <div main>
                <iron-pages selected="{{selected}}">
                    <section>
                        <poly-user-music></poly-user-music>
                    </section>
                    <section>
                        <poly-daily-music></poly-daily-music>
                    </section>
                    <section>
                        <poly-users></poly-users>
                    </section>
                    <section>
                        <poly-about-app></poly-about-app>
                    </section>
                </iron-pages>
            </div>
        </paper-drawer-panel>

    </template>

</dom-module>

<script>
    Polymer({
        is: "user-center",
        properties: {
            selected: {
                type: Number,
                value: 1
            }

        },

        settime:function(e){
            console.log(e);

        },









    });

</script>
